<template>
    <div class="productDetailContainer">
        <div class="customeRow">
            <div class="nav">
                <router-link to="/home">主页</router-link>
                / {{detail.goods_name}}
            </div>
            <div class="productDetailHeader">
                <el-row>
                    <el-col :xs="24" :sm="15" :md="15" :lg="15" :xl="15">
                        <Product
                                :list="[{leftWidth:100,img:spec_list[currentSpecId]&&spec_list[currentSpecId].form.image_path||[]}]"></Product>
                    </el-col>
                    <el-col :xs="24" :sm="9" :md="9" :lg="9" :xl="9" class="productDetailInfo">
                        <div class="productDetailInfoTitle">
                            {{detail.goods_name}}
                        </div>
                        <div class="productDetailInfoSubTitle">
                            {{detail.selling_point}}
                        </div>
                        <div class="productDetailInfoDetail">
                            型号：{{spec_list[currentSpecId]&&spec_list[currentSpecId].form.goods_no||'-'}}
                        </div>
                        <div class="productDetailInfoDetail">
                            规格：<span v-for="(item,index) in spec_attr" :key="index">{{index!==0?'+':''}}{{item.spec_items[currentSpecIndex[index]].spec_value}}</span>
                        </div>
                        <div class="customeLine" style="background: #000;"></div>
                        <div class="colorListContainer">
                            <div v-for="(item,index) in spec_attr" :key="index">
                                <div class="colorListContainerTitle">{{index===0?'颜色':item.group_name}}</div>
                                <div class="colorList" v-if="index===0">
                                    <div class="colorListItem" v-for="(specItem,specIndex) in item.spec_items"
                                         :key="specIndex"
                                         @click="handleChangeColor(index,specItem.item_id,specIndex)">
                                        <img :src="colorList[specIndex]"/>
                                    </div>
                                </div>
                                <div class="colorList" v-else>
                                    <div :class="[currentSpec[index]===specItem.item_id?'colorListItemOther check':'colorListItemOther'] "
                                         v-for="(specItem,specIndex) in item.spec_items" :key="specIndex"
                                         @click="handleChangeColor(index,specItem.item_id,specIndex)">
                                        {{specItem.spec_value}}
                                    </div>
                                </div>
                            </div>
                            <!--                            <div class="colorListContainerTitle">颜色选择</div>-->
                            <!--                            <div class="colorList">-->
                            <!--                                <div class="colorListItem" v-for="(item,index) in colorList" :key="index"-->
                            <!--                                     @click="handleChangeColor(index)">-->
                            <!--                                    <img :src="item"/>-->
                            <!--                                </div>-->
                            <!--                            </div>-->
                        </div>
                        <div class="productDetailInfoPrice">
                            <span>中国官方零售价:</span><span>￥{{spec_list[currentSpecId]&&spec_list[currentSpecId].form.line_price||'-'}}</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="productOtherInfo">
                <el-tabs class="elTabsContainer" v-model="activeName" type="card" @tab-click="handleClick"
                         v-if="detail.content">
                    <el-tab-pane label="描述" name="first"
                                 v-html="detail.content.length>0?detail.content[0]:''"></el-tab-pane>
                    <el-tab-pane label="技术规格" name="second" v-html="detail.content.length>1?detail.content[1]:''">技术规格
                    </el-tab-pane>
                    <el-tab-pane label="包含配件" name="third" v-html="detail.content.length>2?detail.content[2]:''">包含配件
                    </el-tab-pane>
                    <el-tab-pane label="常见问题" name="fourth" v-html="detail.content.length>3?detail.content[3]:''">常见问题
                    </el-tab-pane>
                </el-tabs>
            </div>
            <MoreProduct @handleRedirectProductDetail="handleRedirectProductDetail"
                         @handleChangeProductObject="handleChangeProductObject" :moreProductObject="moreProductObject"
                         :loading="loading"
                         :lists="goodsList" :leftWidth="leftWidth"></MoreProduct>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import Product from '../components/Product';
    import MoreProduct from '../components/MoreProduct';
    import {Row, Col, TabPane, Tabs, Message} from 'element-ui';
    import serve from '../util/serve';
    import {colors, accessoryColor} from '../util/colors';

    Vue.use(Row);
    Vue.use(Col);
    Vue.use(TabPane);
    Vue.use(Tabs);
    export default {
        name: 'Blog',
        data: () => {
            return {
                visible: false,
                activeName: 'first',
                detail: {},
                specData: {},
                spec_attr: [],
                colorList: [],
                currentColor: 0,
                spec_items: [],
                spec_list: [],
                leftWidth: 25,
                goodsList: [],
                loading: false,
                currentSpecId: '',
                category_id: '',
                currentSpecIndex: [],
                navMessage: {
                    10136: '相机包-为单反，微单，旁轴相机，数字相机和模拟胶片相机而设计',
                    10140: '望远镜包',
                    10143: '休闲包-时尚的休闲包，旅行包和公文包',
                    10528: '电脑包',
                    10142: '配件-专门搭配Billingham包'
                },
                moreProductObject: {
                    translate: 'translate(0)',
                    clickCount: 0,
                },
                isPhone: false
            }
        },
        beforeDestroy() {
            localStorage.removeItem('category_id');
            window.onresize = null;
        },
        metaInfo() {
            return serve.handleSetMeta(this.$route.params.id, `/product/${this.$route.params.id}`);
        },
        components: {
            Product,
            MoreProduct
        },
        inject: ['reload'],
        props: {},
        mounted() {
            this.handleGetProduct(this.$route.params.id);
            const category_id = localStorage.getItem('category_id');
            this.category_id = category_id;
            const that = this;
            window.onresize = () => {
                const isPhone = that.isPhone;
                if (serve._isMobile()) {
                    if (!isPhone) {
                        that.handleInitObject();
                        that.isPhone = true;
                    }
                    that.leftWidth = 100;
                    const list = that.goodsList;
                    for (let i = 0; i < list.length; i++) {
                        list[i].leftWidth = 100;
                    }
                } else {
                    if (isPhone) {
                        that.handleInitObject();
                        that.isPhone = false;
                    }
                    that.leftWidth = 25;
                    const list = that.goodsList;
                    for (let i = 0; i < list.length; i++) {
                        list[i].leftWidth = 25;
                    }
                }
            };
        },
        watch: {
            '$route': function () {

            }
        },
        methods: {
            handleChangeProductObject(e) {
                this[e.key] = e.value;
            },
            /**
             * 初始化
             */
            handleInitObject() {
                this.moreProductObject.clickCount = 0;
                this.moreProductObject.translate = 'translate(0)';
            },
            handleClick(tab, event) {
                console.log(tab, event)
            },
            handleRedirectProductDetail(params) {
                this.reload();
                this.$router.push('/product/' + params.id);
            },
            /**
             * 获取产品详情
             * @param goods_id
             */
            handleGetProduct(goods_id) {
                const loading = serve.doLoading();
                const _this = this;
                _this.loading = true;
                const params = {
                    goods_id
                };
                const url = serve.handleGetUrl('getGoodsDetail', params);
                serve.doPost(url, {goods_id})
                    .then((response) => {
                        loading.close();
                        const data = response.data;
                        if (data.code === 1) {
                            window.scroll(0, 0);
                            const detail = data.data.detail;
                            const specData = data.data.specData;
                            const detailList = serve.unescape(detail.content).split('<hr/>');
                            detail.content = detailList;
                            _this.detail = detail;
                            if ((detail.content.length > 2)) {
                                const temp = serve.handleReplaceSpan(serve.unescape(detail.content[2]));
                                detail.content[2] = temp;
                            }
                            const spec_items = specData.spec_attr[0].spec_items;
                            const spec_list = specData.spec_list;

                            const colorList = [];
                            const goods_categories = detail.goods_categories;
                            let userColors = colors;
                            for (let key in goods_categories) {
                                if (key === '10529') {
                                    userColors = accessoryColor;
                                }
                            }
                            const new_spec_items = [];
                            for (let i = 0; i < spec_items.length; i++) {
                                let spec_value = spec_items[i].spec_value;
                                if (spec_value.indexOf('+') > -1) {
                                    continue;
                                }
                                new_spec_items.push(spec_items[i]);
                                let hasColor = false;
                                for (let j = 0; j < userColors.length; j++) {
                                    const colorNames = userColors[j].colorName.split('/');
                                    let check = true;
                                    let temp = spec_value;
                                    for (let k = 0; k < colorNames.length; k++) {
                                        const checkIndex = temp.indexOf(colorNames[k]);
                                        if (checkIndex < 0) {
                                            check = false;
                                        } else {
                                            const first = temp.substring(0, checkIndex);
                                            let second = '';
                                            if (checkIndex + colorNames[k].length !== temp.length - 1) {
                                                second = temp.substring(checkIndex + colorNames[k].length);
                                            }
                                            temp = first + second;
                                        }
                                    }
                                    if (check) {
                                        colorList.push('/static/img/' + userColors[j].colorPng);
                                        hasColor = true;
                                        break;
                                    }
                                }
                                if (!hasColor) {
                                    colorList.push('/static/img/color1.jpg');
                                }
                            }
                            const spec_attr = specData.spec_attr;
                            spec_attr[0].spec_items = new_spec_items;
                            const currentSpec = [];
                            const currentSpecIndex = [];
                            for (let i = 0; i < spec_attr.length; i++) {
                                currentSpec.push(spec_attr[i].spec_items[0].item_id);
                                currentSpecIndex.push(0);
                            }
                            const new_spec_list = {};
                            spec_list.forEach((item) => {
                                new_spec_list[item.spec_sku_id] = item;
                            });
                            _this.colorList = colorList;
                            _this.spec_items = new_spec_items;
                            _this.spec_attr = spec_attr;
                            _this.currentSpec = currentSpec;
                            _this.currentSpecIndex = currentSpecIndex;
                            _this.currentSpecId = currentSpec.join('_');
                            _this.spec_list = new_spec_list;
                            _this.handleGetProductList(detail.category_id, goods_id);
                        } else {
                            Message({
                                message: data.msg || '请求错误',
                                type: 'error'
                            });
                        }
                    }).catch(() => {
                    loading.close();
                    _this.loading = false;
                });
            },
            /**
             * 处理选择颜色
             * @param index
             * @param spec_id
             * @param spec_index
             */
            handleChangeColor(index, spec_id, spec_index) {

                const {currentSpec, currentSpecIndex} = this;
                console.log(currentSpecIndex)
                currentSpec[index] = spec_id;
                currentSpecIndex[index] = spec_index;
                this.currentSpecId = currentSpec.join('_');
                this.currentSpec = currentSpec;
                this.currentSpecIndex = currentSpecIndex;
            },
            /**
             * 获取产品列表
             * @param category_id
             * @param goods_id
             */
            handleGetProductList(category_id, goods_id) {
                const loading = serve.doLoading();
                const _this = this;
                const params = {
                    page: 1,
                    sortType: 'all',
                    category_id,
                    search: ''
                };
                const url = serve.handleGetUrl('getGoodsList', params);
                serve.doPost(url, {category_id, search: '', page: 1})
                    .then((response) => {
                        loading.close();
                        _this.loading = false;
                        const data = response.data;
                        if (data.code === 1) {
                            const list = data.data.list;
                            const goodsList = list.data;
                            let leftWidth = 25;
                            if (serve._isMobile()) {
                                _this.leftWidth = 100;
                                _this.isPhone = true;
                                console.log(true)
                                leftWidth = 100;
                            }else{
                                console.log(false)
                            }
                            const newGoodsList = [];
                            for (let i = 0; i < goodsList.length; i++) {
                                if (goodsList[i].goods_id === goods_id) {
                                    continue;
                                }
                                goodsList[i].leftWidth = leftWidth;
                                newGoodsList.push(goodsList[i]);
                            }
                            _this.goodsList = newGoodsList;
                        } else {
                            Message({
                                message: data.msg || '请求错误',
                                type: 'error'
                            });
                        }
                    }).catch(() => {
                    loading.close();
                    _this.loading = false;
                });
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    /*p span{*/
    /*    font-family: 宋体, SimSun;*/
    /*    font-size:12px !important;*/
    /*    line-height: 1.75em;*/
    /*    text-align:justify;*/
    /*}*/
    p img {
        max-width: 100%;
        margin: 0 auto;
        display: block;
    }

    p video {
        margin: 0 auto;
        display: block;
    }

    .productDetailHeader {
        margin-top: 30px;
    }

    .productDetailInfo {
        padding-left: 40px;
        font-size: 14px;
    }

    .productDetailInfoTitle {
        font-size: 22px;
        color: #000;
        font-weight: bold;
    }

    .productDetailInfoSubTitle {
        margin: 20px auto;
        line-height: 22px;
    }

    .productDetailInfoDetail {
        line-height: 22px;
    }

    .colorListContainer {
        margin-top: 10px;
    }

    .colorList {

    }

    .colorListItem {
        display: inline-block;
        margin-right: 10px;
        height: 18px;
        width: 18px;
        margin-top: 8px;
        cursor: pointer;
    }

    .colorListItemOther {
        display: inline-block;
        margin-right: 10px;
        padding: 5px 10px;
        margin-top: 8px;
        cursor: pointer;
        border: 1px solid #ddd;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
    }

    .colorListItemOther.check {
        border: 1px solid orange;
        color: orange;
    }

    .colorListItem img {
        width: 100%;
        height: 100%;
    }

    .productDetailInfoPrice {
        font-weight: bold;
        color: #000;
        margin-top: 20px;
        height: 30px;
        line-height: 30px;
    }

    .productDetailInfoPrice span {
        font-size: 18px;
        display: inline-block;
        vertical-align: middle;
    }

    .productDetailInfoPrice span:last-child {
        font-size: 24px;
        display: inline-block;
        vertical-align: middle;
    }


    .productOtherInfo {
        border-top: 1px solid #000000;
        margin-top: 10px;
    }

    .productOtherInfo .el-tabs--card > .el-tabs__header {
        border-bottom: none;
    }

    .productOtherInfo .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
        background: #fff;
        color: #000;
    }

    .productOtherInfo .el-tabs__item {
        background: #ddd;
        font-weight: bold;
        font-size: 14px;
        color: #000000;
    }

    .productOtherInfo .el-tabs--card > .el-tabs__header .el-tabs__item {
        border: none;
    }

    .productOtherInfo .el-tabs--card > .el-tabs__header .el-tabs__nav {
        border: none;
    }


    @media screen and (min-width: 769px) and (max-width: 1200px) {
        .elTabsContainer {
            padding: 0 10px;
        }
    }

    @media screen and (max-width: 768px) {
        .productDetailContainer {
            padding: 0 10px;
        }

        .productDetailInfo {
            padding-left: 0;
        }
    }
</style>
